<template>
  <Layout>
    <div class="product">
      <div class="banner">
        <img :src="productBanner" alt="" class="bg-img">
        <h3>MAX HD Series</h3>
        <p>Heavy Duty, Multi-Cellular Powerhouses for Mission Critical Connectivity</p>
<!--        <img :src="productBanner" alt="" class="product-img">-->
      </div>
      <div class="content">
        <New />
        <p>Powerful cellular routers that provide unbreakable connectivity and blazing speeds. Use them to connect to all available network operators in your country.</p>
        <ProductList :productArr="productArr" title="What’s Featured?"/>
      </div>
    </div>
  </Layout>
</template>

<script>
import {ref, onMounted} from 'vue'
import Layout from '/@/components/layout/Layout.vue'
import New from "../components/home/New.vue";
import ProductList from "../components/product/ProductList.vue";
import {getProductList} from "../api/product";
import productImg from "../assets/images/product/2.5 product.jpg"
export default {
  name: 'Product',
  components:{Layout, ProductList, New},
  setup(){
    let productArr = ref([])
    const productBanner = productImg
    onMounted(()=>{
      getProductList().then((res)=> {
        if (res && res.code === 200) {
          productArr.value = res.data
        }
      })
    })
    return{
      productArr,
      productBanner
    }
  }
}
</script>

<style lang="scss" scoped>
.product {
  .banner{
    position: relative;
    margin-bottom: 200px;
    img.bg-img{
      width: 100%;
      height:412px;
      object-fit: cover;
    }
    h3{
      position: absolute;
      top:50px;
      font-size: 40px;
      line-height: 50px;
      left:50%;
      transform:translateX(-50%);
      color:white;
    }
    p{
      position: absolute;
      top:100px;
      font-size: 20px;
      line-height: 50px;
      left:50%;
      transform:translateX(-50%);
      color:white;
    }
    .product-img{
      position: absolute;
      top:120px;
      left:50%;
      transform:translateX(-50%);
      width:850px;
      height:490px;
    }
  }
  .content{
    margin:0 auto;
    width:70vw;
    p{
      width:50vw;
      margin: 20px auto 20px auto;
      text-align: center;
      font-size:18px;
      color:#737373;
    }
  }
}
</style>
